<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{padding:0px; margin:0px;}
		/*模版列表样式*/
		.left{width:150px; height:330px;float:left;}
		p{width:500px;height:80px;}
		.Template{width:150px;float:left;overflow-y:scroll;width:150px;height:298px;}
		.TemplateList{color:red;background:#00BCD4;width:150px;	}
		table th td{text-align:center;}
		/*设置各个省份的运费金额样式*/
		fieldset{margin-left:180px;width:500px;}
		.scrolling{width:508px; height:20px;}
		.scrolling td{text-align:center;}
		.scrolling td input{width:50px;text-align:center;}
		.destination{width:80px;}
		.firstHeavy{width:96px;}
		.firstHeavyFreight{width:113px;}
		.continuedHeavyFreight{width:84px;}
		.rounded{width:100px;}
		legend{margin-left:10px;}
		legend span{color:red;}
		/*上面的选择默认样式*/
		.selectTemplate{width:800px; height:50px;}
		/*按钮样式*/
		.button{width:800px;margin:10px 607px; height:30px;}
	</style>
</head>
<body>
	<form action="" method="post">
		<p class="instructions">
			说明：如果您设置了运费模版（即运费不为0），系统在下载订单时会自动用您选择的默认运费模版填写真实运费，并在打印快递单时，会再次调用您选定的快递单模版再次更新真实运费
		</p>
		<!-- 以下是默认选择功能 -->
 		<div class="selectTemplate">
			请选择你默认的运费模版：
			<select name="" id="">
				<option value="0">EMS标准快递</option>
				<option value="1">中通速递</option>
				<option value="1">圆通速递</option>
			</select>
			<input type="submit" value="保存" name="settingTemplate">
		</div> 
		<!-- 以上是默认选择功能 -->

		<div class="left">
			<!-- 以下是列表显示页 -->
			<div class="TemplateList">
				快递单模版列表
			</div>
			<div class="Template">	
				<table>
					<tr><td onclick="mouseoutHandler(event)" >中通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >圆通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >申通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >汇通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >中通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >中通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >圆通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >申通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >汇通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >中通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >中通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >圆通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >申通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >汇通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >中通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >中通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >圆通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >申通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >汇通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >中通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >中通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >圆通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >申通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >汇通速递</td></tr>
					<tr><td onclick="mouseoutHandler(event)" >中通速递</td></tr>
				</table>
			</div>
			<!-- 以上是列表显示页 -->
		</div>
	<fieldset>
		<legend>设置
			<span id="default">天天快递</span>
			到各个省份的运费
		</legend>
	<iframe src="feright_right.html" width="525px" height="242px" scrolling="yes" class="iframe" scrolling="no" frameborder="no"/></iframe>
		<table class="scrolling">
			<tr>
				<td class="destination">批量设置</td>
				<td class="firstHeavy"><input type="text"></td>
				<td class="firstHeavyFreight"><input type="text"></td>
				<td class="continuedHeavyFreight"><input type="text"></td>
				<td class="rounded"><input type="text"></td>
			</tr>
		</table>
	</fieldset>
		<div class="button">
			<input type="submit" value="保存设置" name="settingFreight">
		</div> 
	</form>
</body>
<script>

//点击左边的模版列表，快递的公司发生改变
function mouseoutHandler(oEvent,objTagName)
        {
        var oEvent = oEvent ? oEvent : window.event 
        var oElem = oEvent.toElement ? oEvent.toElement : oEvent.relatedTarget; 
        document.getElementById("default").value=(oElem.innerHTML); 
        console.log(document.getElementById("default").value);
		var div_3Node = document.getElementById("default"); 
		var childNode = div_3Node.childNodes[0]; 
		var newNode = document.createTextNode(document.getElementById("default").value); 
        div_3Node.replaceChild(newNode,childNode); 
        }
</script>
</html>